<template>
	<div class="navig_bar_contanier" v-show="isShow">
		<div class="navig_bar_wrapper">
			<div class="navig_bar_left_container"
			v-customShow="this.$router.routeStack.length>1"
			@click="onClickBack"
			>
				<slot name="left"></slot>
			</div>
			<div class="navig_bar_center_container">
				<slot name="middle"></slot>
			</div>
			<div class="navig_bar_reight_container">
				<slot name="reight"></slot>
			</div>
			
		</div>
	</div>
</template>

<script>
	export default {
		computed:{//监听导航栏显示隐藏
			isShow:function(){
				return this.$route.meta.isShowNav;
			}
		},
		methods:{
			  onClickBack(){
			      this.$router.backRoute();
			    }
		}
	}
</script>

<style scoped>
.navig_bar_contanier{
	width: 100%;
	height: 3.2rem;
	position: fixed;
	left: 0px;
	top: 0px;
	background-color: white;
}
.navig_bar_wrapper{
	width: 100%;
	height: 100%;
	display: inline-flex;
	justify-content: space-between;
	align-self: center;
}
.navig_bar_left_container{
	width: 20%;
	height: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}
.navig_bar_center_container{
	width: 60%;
	height: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;	
}
.navig_bar_reight_container{
	width: 20%;
	height: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;	
	
}
.navig_bar_wrapper img{
	width: 24px;
	height: 24px;
}
</style>